<template>
    <el-container style="height: 90vh; border: 1px solid #eee">
        <el-aside width="160px">
            <el-row>
                <el-row type="flex" style="margin: 0px">
                    <el-col :span="5"><el-button icon="el-icon-arrow-left" :class="has_prev?'transbtn':'hidebtn'" @click="changeYear(false)"></el-button></el-col>
                    <el-col :span="14"><h4>{{current_year}}年</h4></el-col>
                    <el-col :span="5"><el-button icon="el-icon-arrow-right" :class="has_next?'transbtn':'hidebtn'" @click="changeYear(true)"></el-button></el-col>
                </el-row>
                <el-menu router :default-active="defaultIndex">
                    <el-menu-item v-for="(period,index) in periods" :key="period.id"
                                  :index="'/fee_list/'+period.id">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{period.name}}</span>
                    </el-menu-item>
                </el-menu>
            </el-row>
        </el-aside>
        <router-view  @emitindex="setIndex()"></router-view>
    </el-container>
</template>
<style>
    .transbtn{
        background-color: transparent;
        margin: 0px;
        padding: 8px 0px;
    }
    .hidebtn{
        display: none;
    }
</style>
<script>
    export default{
        data(){
            return {
                periods: '',
                staff: [],
                current_staff: null,
                defaultIndex:'',
                has_next:false,
                has_prev:false,
                current_year:new Date().getFullYear(),
            }
        },
        created(){
            this.getPeriods();
            this.updatePrevNext();
        },
        methods: {
            getPeriods(){
                axios.get('api/v1/period/?year='+this.current_year).then(result => {
                    this.periods = result.data;
                });
            },
            setIndex(){
                this.defaultIndex="/fee_list/"+this.$route.params.period_id;
            },
            changeYear(forwords){
                if(forwords){
                    this.current_year++;
                }else{
                    this.current_year--;
                }
                this.getPeriods(this.current_year);
                this.updatePrevNext();
            },
            updatePrevNext(){
                axios.get('api/v1/period/'+(this.current_year-1)+'/exist').then(result=>{
                        this.has_prev=result.data.exist;
                });
                axios.get('api/v1/period/'+(this.current_year+1)+'/exist').then(result=>{
                    this.has_next=result.data.exist;
                });
            }
        }
    }
</script>
